<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <script type="text/javascript" src="../../layuiadmin/js/system/jquery.min.js" ></script>
    <script src="../../layuiadmin/js/system/jquery.cookie.js"></script>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/js/system/zTree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../layuiadmin/js/system/zTree/js/jquery.ztree.all.min.js" ></script>
    <style>
        #div1{
            position:absolute;
            top:10px;
            left: 10px;
        }
        #div2{
            position:absolute;
            top:100px;
            left: 10px;
        }
        #div3{
            position:absolute;
            top:10px;
            left:700px;
        }
        #btndiv{
            position:absolute;
            top:300px;
            left:200px;
        }
        .ztree * {
            font-size: 16px;
            align-content: center;

        }
    </style>
</head>
<body>
<div class="layui-inline" id="div1">
    <label class="layui-form-label">角色名称</label>
    <div class="layui-input-inline">
        <input type="text" name="roleName" id="roleName"  placeholder="角色名称" class="layui-input">
        <p id="p1"></p>
    </div>
</div>
<div class="layui-inline" id="div2">
    <label class="layui-form-label">角色描述</label>
    <div class="layui-input-inline">
        <textarea type="text" id="roleDesc" cols="50" rows="10" placeholder="请输入对新增角色的描述"></textarea>
        <p id="p2"></p>
    </div>
</div>
<div id="btndiv">
    <button type="button" class="layui-btn " id="didClick">提交</button>
    <button class="layui-btn " data-type="test" id="goRolelist">返回上级</button>
</div>
<div id="div3">
    <button type="button" class="layui-btn layui-btn-sm" id="checkall">全选</button>
    <button type="button" class="layui-btn layui-btn-sm" id="InvertSelection">反选</button>
    <ul id="treeDemo" class="ztree"></ul>
</div>
<script>
    var settingss = {
        data: {
            simpleData: {
                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "authorityId",  //节点数据中保存唯一标识的属性名称
                pIdKey: "authorityPid",    //节点数据中保存其父节点唯一标识的属性名称
                rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "authorityName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
            }
        },
        check:{
            enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
            nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
        }
    };

    $(document).ready(function(){
        $.ajax({
            type:"post",
            url:"http://localhost:8080/aut/listQx",
            xhrFields:{withCredentials: true},
            success:function(msg){
                zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, msg); //初始化树
                var nodeList = zTreeObj.getNodes();//获取根节点个数,getNodes获取的是根节点的集合
                for(var i=0;i<7;i++){
                zTreeObj.expandNode(nodeList[i],true);
                }
            }
        });

        //全选and全不选
        $('#checkall').on('click',function (e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");//得到tree对象 treeDemo是我的treeid
            var node = zTree.getNodes();//得到全部节点
            var nodes = zTree.transformToArray(node);//全部节点转换成数组array
            var checkNode = zTree.getCheckedNodes().length;//得到被选中的节点数量,zTree.getCheckedNodes()和zTree.getCheckedNodes(true)一样,可以传参(true/false),默认是true

            if (checkNode < nodes.length) {//已选中的节点数小于总数 - 全选
                $('#all').prop('checked', true)
                zTree.checkAllNodes(true);//给全部节点设置为true
            } else{
                zTree.checkAllNodes(false);//给全部节点设置为false
            }
        });
        //反选
        $("#InvertSelection").click(function (e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");

            var checked = zTree.getCheckedNodes(true);//得到选中的节点
            var checkeds = zTree.transformToArray(checked); //转变为数组
            var checkNode = zTree.getCheckedNodes(true).length;//选中的节点数量

            var node = zTree.getNodes();//全部节点
            var nodes = zTree.transformToArray(node);//全部节点数量

            if(checkNode< nodes.length){//已选中的节点数小于总数 - 全选

                zTree.checkAllNodes(true);//给所有的都设置为true

                $.each(checkeds, function(index,node) {//之前选中的节点为false
                    zTree.checkNode(node, false, false);
                });

            }else{
                zTree.checkAllNodes(false);//否则所有的都设置为false
            }

        });

        $('#didClick').click(function () {
            $("#p1").html("");
            $("#p2").html("");
            var ztreeObj=$.fn.zTree.getZTreeObj("treeDemo");
            var list=ztreeObj.getCheckedNodes();
            var autid=[];
            for(var i=0;i<list.length;i++){
                autid.push(list[i].authorityId);
            }
            var arr=autid.join(",");
            var roleName=$("#roleName").val();
            var roleDesc=$("#roleDesc").val();
            if(arr==null||arr==''){
                alert("您没有为本角色添加权限，请选择权限")
            }else if(roleName==null||roleName=='') {
                $("#p1").html("<p style='color: red'>请输入角色名称</p>");
            }else if(roleDesc==null||roleDesc==''){
                $("#p2").html("<p style='color: red'>请输入角色描述</p>");
            }else if(roleName!='' && roleName!=null){
                alert("111111111111");
                $.post("http://localhost:8080/aut/insRoleName",{
                    "roleName":roleName
                },function (msg) {
                    alert("2222222");
                    if(msg==200){
                        alert("33333333333");
                        $("#p1").html("<p style='color: red'>角色已存在，请重新输入</p>");
                    }else{
                        $.post("http://localhost:8080/aut/insRole",{
                            "roleName":roleName,
                            "roleDesc":roleDesc,
                            "arr":arr
                        },function () {
                            window.location.href="roleList.html";
                            alert("添加成功")
                        })
                    }
                })
            }
        });
        $("#goRolelist").click(function () {
            window.location.href=("roleList.html");
        })
    });
</script>
</body>
</html>